<template>
	<view class="search">
		<view class="serach_top">
			<view class="search_box">
				<uni-icons type="left" size="30" @click="back"></uni-icons>
				<view style="flex: 1;">
					<block v-if="current === 0">
						<uni-search-bar placeholder="请输入茶饮品牌或品类" :radius="100" bgColor="#EEEEEE" cancelButton="none"
							v-modal="productValue"></uni-search-bar>
					</block>
					<block v-else-if="current === 1">
						<uni-search-bar placeholder="请输茶饮供应商" :radius="100" bgColor="#EEEEEE" cancelButton="none"
							v-modal="supplyChainValue"></uni-search-bar>
					</block>
					<block v-else-if="current === 2">
						<uni-search-bar placeholder="请输入茶饮新闻" :radius="100" bgColor="#EEEEEE" cancelButton="none"
							v-modal="newsValue"></uni-search-bar>
					</block>
					<block v-else="current === 3">
						<uni-search-bar placeholder="请输入商业体" :radius="100" bgColor="#EEEEEE" cancelButton="none"
							v-modal="commercialEntityValue"></uni-search-bar>
					</block>
				</view>
			</view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#2979ff"></uni-segmented-control>
		</view>
		<view class="search_content">
			<view v-show="current === 0">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="productLower">
					<block v-for="item in productList" :key="item.id">
						<product-card :item="item" />
					</block>
				</scroll-view>
			</view>
			<view v-show="current === 1">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="supplyChainLower">
					<block v-for="item in supplyChainList" :key="item.id">
						<supply-chain-card :item="item" />
					</block>
				</scroll-view>
			</view>
			<view v-show="current === 2">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="newsLower">
					<block v-for="item in newsList" :key="item.id">
						<news-card :item="item" />
					</block>
				</scroll-view>
			</view>
			<view v-show="current === 3">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="commercialEntityLower">
					<block v-for="item in commercialEntityList" :key="item.id">
						<commercial-entity-card :item="item" />
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import ProductCard from '../../components/ProductCard.vue'
	import SupplyChainCard from '../../components/SupplyChainCard.vue'
	import NewsCard from '../../components/NewsCard.vue'
	import CommercialEntityCard from '../../components/CommercialEntityCard.vue'
	export default {
		components: {
			ProductCard,
			SupplyChainCard,
			NewsCard,
			CommercialEntityCard
		},
		data() {
			return {
				current: 0,
				items: ['品牌', '供应链', '新闻', '商业体'],
				limit: 10, // 每页显示数量
				isLoading: false, // 控制加载状态的标志位

				productValue: '', // 品牌搜索值
				productPage: 1, // 当前页码
				productTotal: 0,
				productList: [{
						id: 1,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
					{
						id: 2,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
					{
						id: 3,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
					{
						id: 4,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
					{
						id: 5,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
					{
						id: 6,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
					{
						id: 7,
						img: '../../static/logo.png',
						name: '兰州拉面',
						stores: '34957',
						publicPraise: '77.74',
						price: '18.50',
						tag: '茶饮'
					},
				],

				supplyChainValue: '', // 供应链搜索值
				supplyChainPage: 1, // 当前页码
				supplyChainTotal: 0,
				supplyChainList: [{
						id: 1,
						title: '餐饮供应商·非餐饮类',
						list: [{
								id: 1,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 2,
								img: '../../static/logo.png',
								label: '调理品'
							},
							{
								id: 3,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 4,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 5,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 6,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 7,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 8,
								img: '../../static/logo.png',
								label: '预制菜'
							},
							{
								id: 9,
								img: '../../static/logo.png',
								label: '吸管'
							},
							{
								id: 10,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 11,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 12,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 13,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
						],
					},
					{
						id: 2,
						title: '餐饮供应商·非餐饮类',
						list: [{
								id: 1,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 2,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 3,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 4,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 5,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 6,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 7,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 8,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 9,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 10,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 11,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 12,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
							{
								id: 13,
								img: '../../static/logo.png',
								label: '调理品预制菜'
							},
						],
					},
				],

				newsValue: '', // 新闻搜索值
				newsPage: 1, // 当前页码
				newsTotal: 0,
				newsList: [{
					id: '1',
					date: '10-12',
					list: [{
							id: 1,
							title: '第一个好消息，国庆出游消费活力上涨，国外游却不香了。和以前旅游消费扎根国外不同，今年的国庆期间，国内出游人次达到了7.65亿，同比增长5.9%；同时国内游客总花费也达到了7000多亿元，同比增长6.3%。',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 2,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 3,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 4,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 5,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 6,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 7,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 8,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 9,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 10,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 11,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 12,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 13,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 14,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 15,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
						{
							id: 16,
							title: '男童骑行遭碾身亡，家属首次发声：后悔让孩子学车',
							copy: '中国',
							img: '../../static/logo.png'
						},
					]
				}],

				commercialEntityValue: '', // 商业体搜索值
				commercialEntityPage: 1, // 当前页码
				commercialEntityTotal: 0,
				commercialEntityList: [
					{
						id: 1,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 2,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 3,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 4,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 5,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 6,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 7,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 8,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 9,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 10,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 11,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
					{
						id: 12,
						img: '../../static/logo.png',
						name: '上海环球港',
						address: '上海',
						stores: '562',
						area: '22万'
					},
				],
			}
		},
		onLoad() {
			this.getProductList();
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},

			// 产品
			productLower() {
				if (!this.isLoading && this.productPage * this.limit < this.productTotal) { // 检查是否正在加载以及是否还有更多数据
					this.isLoading = true;
					this.productPage++;
					this.getProductList();
				}
			},
			getProductList() {
				// 发起数据请求的逻辑
				axios.get(`/api/data?page=${this.productPage}&limit=${this.limit}`)
					.then(response => {
						this.productList = [...this.productList, ...response.data];
						this.productTotal = this.productList.length;
						this.isLoading = false;
					})
					.catch(error => {
						console.error(error);
						this.isLoading = false;
					});
			},

			// 供应链
			supplyChainLower() {
				if (!this.isLoading && this.supplyChainPage * this.limit < this.supplyChainTotal) { // 检查是否正在加载以及是否还有更多数据
					this.isLoading = true;
					this.supplyChainPage++;
					this.getsupplyChainList();
				}
			},
			getsupplyChainList() {
				// 发起数据请求的逻辑
				axios.get(`/api/data?page=${this.productPage}&limit=${this.limit}`)
					.then(response => {
						this.supplyChainList = [...this.supplyChainList, ...response.data];
						this.supplyChainTotal = this.supplyChainList.length;
						this.isLoading = false;
					})
					.catch(error => {
						console.error(error);
						this.isLoading = false;
					});
			},

			// 新闻
			newsLower() {
				if (!this.isLoading && this.newsPage * this.limit < this.newsTotal) { // 检查是否正在加载以及是否还有更多数据
					this.isLoading = true;
					this.newsPage++;
					this.getNewsList();
				}
			},
			getNewsList() {
				// 发起数据请求的逻辑
				axios.get(`/api/data?page=${this.newsPage}&limit=${this.limit}`)
					.then(response => {
						this.newsList = [...this.newsList, ...response.data];
						this.newsTotal = this.newsList.length;
						this.isLoading = false;
					})
					.catch(error => {
						console.error(error);
						this.isLoading = false;
					});
			},

			// 商业体
			commercialEntityLower() {
				if (!this.isLoading && this.commercialEntityPage * this.limit < this
					.commercialEntityTotal) { // 检查是否正在加载以及是否还有更多数据
					this.isLoading = true;
					this.commercialEntityPage++;
					this.getNewsList();
				}
			},
			getNewsList() {
				// 发起数据请求的逻辑
				axios.get(`/api/data?page=${this.commercialEntityPage}&limit=${this.limit}`)
					.then(response => {
						this.commercialEntityList = [...this.commercialEntityList, ...response.data];
						this.commercialEntityTotal = this.commercialEntityList.length;
						this.isLoading = false;
					})
					.catch(error => {
						console.error(error);
						this.isLoading = false;
					});
			},

			back() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.serach_top {
		position: fixed;
		top: 0;
		width: 100vw;
		background: #f5f5f5;
		z-index: 999;
		border-bottom: 1rpx solid #999999;
	}

	.search_box {
		display: flex;
		align-items: center;
	}

	.search_content {
		padding: 0 20rpx 20rpx;
		background: #f5f5f5;
		margin-top: 186rpx;
	}
</style>